<template>
    <div class="main">
        <div class="museum-list" v-if="deadweightBool">
            <div
                class="item"
                v-for="item in museumList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                @click="openLinkInNewWindow(item)"
            >
                <RightTop :cameraIndexCode="item.cameraIndexCode" :isLocalPlatForm="item.isLocalPlatForm"/>
            </div>
        </div>
        <div class="museum-list" v-else>
            <div
                class="item"
                v-for="item in museumList2.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                @click="openLinkInNewWindow(item)"
            >
                <RightTop2 v-if="item.m3u8Url.includes('.m3u8')" :m3u8Url="item.m3u8Url" :isReset="item.isReset" />
                <RightTop3 v-if="item.m3u8Url.includes('.flv')" :m3u8Url="item.m3u8Url" :isReset="item.isReset" />
            </div>
        </div>
        <div class="museum-pagination">
            <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total,prev,pager,next"
                :total="museumList.length"
                v-if="deadweightBool"
            >
            </el-pagination>
            <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total,prev,pager,next"
                :total="museumList2.length"
                v-else
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {currentGET} from "api";
import RightTop from "./right-top-item.vue";
import RightTop2 from "./right-top-item2.vue";
import RightTop3 from "./right-top-item3.vue";

export default {
    components: {
        RightTop,
        RightTop2,
        RightTop3,
    },
    props: ['userId'],
    data() {
        return {
            orgId: undefined,
            museumList: [],
            museumList2: [],
            currentPage: 1,  // 当前页码
            pageSize: 9,  // 每页显示的行数
            tableData: [],  // 表格数据
            deadweightBool: false,
        }
    },
    created() {
        this.orgId = _.clone(this.$route.query.cityId);
        console.log(this.$route.query.name, "this.$route.query.name");
        // let name = this.$route.query.name;
        // if (name == "江西省博物馆") {
        //     this.deadweightBool = false;
        //     this.museumList2 = [
        //         // {
        //         //     "m3u8Url": "http://www.jxwwpt.com/stream/jxsb/channel/1/hls/live/index.m3u8",
        //         // },
        //         {
        //             "m3u8Url": "http://www.jxwwpt.com/stream/jxsb/channel/2/hls/live/index.m3u8",
        //         },
        //         {
        //             "m3u8Url": "http://www.jxwwpt.com/stream/jxsb/channel/3/hls/live/index.m3u8",
        //         },
        //         {
        //             "m3u8Url": "http://www.jxwwpt.com/stream/jxsb/channel/4/hls/live/index.m3u8",
        //         },
        //         {
        //             "m3u8Url": "http://www.jxwwpt.com/stream/jxsb/channel/5/hls/live/index.m3u8",
        //         },
        //         {
        //             "m3u8Url": "http://www.jxwwpt.com/stream/jxsb/channel/6/hls/live/index.m3u8",
        //         },
        //         // {
        //         //     "m3u8Url": "http://www.jxwwpt.com/stream/jxsb/channel/7/hls/live/index.m3u8",
        //         // },
        //     ];
        // } else if (name == "南昌汉代海昏侯国遗址博物馆") {
        //     this.deadweightBool = false;
        //     this.museumList2 = [
        //         {
        //             "m3u8Url": "http://www.jxwwpt.com/stream/hhh/channel/1/hls/live/index.m3u8",
        //         },
        //         {
        //             "m3u8Url": "http://www.jxwwpt.com/stream/hhh/channel/2/hls/live/index.m3u8",
        //         },
        //     ];
        // } else if (name == "景德镇中国陶瓷博物馆") {
        //     this.deadweightBool = false;
        //     // this.museumList2 = [
        //     //     {
        //     //         "m3u8Url": "http://www.jxwwpt.com/stream/tcbwg/channel/1/hls/live/index.m3u8",
        //     //     },
        //     //     {
        //     //         "m3u8Url": "http://www.jxwwpt.com/stream/tcbwg/channel/2/hls/live/index.m3u8",
        //     //     },
        //     // ];
        //     this.museumList2 = [
        //         {
        //             "m3u8Url": "http://www.jxwwpt.com/streamm/tcbwg01/stream.m3u8",
        //         },
        //         {
        //             "m3u8Url": "http://www.jxwwpt.com/streamm/tcbwg02/stream.m3u8",
        //         },
        //         {
        //             "m3u8Url": "http://www.jxwwpt.com/streamm/tcbwg03/stream.m3u8",
        //         },
        //     ];
        // } else {
            this.getData();
        // }
    },
    mounted() {},
    beforeDestroy() {},
    methods: {
        getData() {
            // let cityId = this.$route.query.cityId;
            // currentGET("getCamerListByReginId", {userId: this.userId})
            currentGET("getVideoUrl", {orgId: this.orgId})
                // currentGET("getCamerListByReginId", {userId: 3504})
                .then((res) => {
                    if (res.success) {
                        this.museumList2 = res.data.map(url => {
                            return {
                                "m3u8Url": url,
                                "isReset": true
                            };
                        });
                        // this.activateTab(0, this.museumList[0].cameraIndexCode, this.museumList[0].isLocalPlatForm);
                        console.log(JSON.parse(JSON.stringify(this.museumList2)), "this.museumList2");
                    } else {
                        this.pageflag = false;
                    }
                })
                .catch((e) => {
                    this.pageflag = false;
                    console.log(e, "error");
                })
                .finally(() => {
                    // this.loading.close();
                });

        },
        // 页面切换方法
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        // 跳转到博物馆页面
        openLinkInNewWindow(item) {
            console.log(JSON.parse(JSON.stringify(item)), "openLinkInNewWindow");

            // 修改导航当前页面类型
            this.$store.commit('museumInformation/SET_CurrentPage', 2);

            this.$router.push({
                path: '/revolutionaryMemorial',
                query: {
                    id: item.cityId,
                    cityId: item.orgId,
                    name: item.museumName,
                }
            });
        },
        // 暂停其他视频的播放
        pauseVideo(refs) {
            console.log(refs, "refs1111111");
            // 获取所有子组件
            const childComponents = this.$children;

            // 遍历子组件
            childComponents.forEach(child => {
                // 在这里可以对子组件进行操作
                console.log(child, "child");
                if (child.$vnode.tag.includes("RightTop3") && child.$refs !== refs) {
                    console.log("字符串包含 RightTop3");
                    // 暂停所有视频
                    child.onPlayerMuted();
                }
            });
        },
        // 暂停其他视频的播放
        pauseVideo2(url) {
            console.log(url, "url111111111");

            this.museumList2 = this.museumList2.map(item => {
                if (item.m3u8Url !== url) {
                    item.isReset = false;
                    setTimeout(()=>{
                        item.isReset = true;
                    },1)
                }
                return item;
            });

            console.log(JSON.parse(JSON.stringify(this.museumList2)), "this.museumList2");
        }
    },
};
</script>
<style lang='scss' scoped>
.main {
  position: relative;
  width: 100%;
  //height: 205px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 22px 0 0 0;

    .museum-list {
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        width: 100%;
        height: 517px;

        .item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 280px;
            height: 160px;
            margin-top: 15px;
            margin-left: 15px;
            //background-image: url("../../assets/img/museum-data.png");
            background-size: cover;
            cursor: pointer;

            .name {
                text-align: center;
                white-space: nowrap; /* 禁止换行 */
                overflow: hidden; /* 超出部分隐藏 */
                text-overflow: ellipsis; /* 使用省略号表示超出部分 */
                /* 可选：设置元素宽度 */
                width: 180px;
                color: #c8e4fa;
            }

            .value {
                color: #edbe7e;
                margin-top: 20px;
                font-weight: 600;
            }
        }
    }

    .museum-pagination {
        display: flex;
        justify-content: center;
        width: 730px;
        padding-top: 20px;
    }
}

::v-deep .el-pagination span{
    //background: #574225;
    //border: 1px solid #FFBB46;
    color: #FFFFFF;
    //padding: 0 5px;
    //line-height: 2;
    //border-radius: 4px;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled){
    background-color: #8ebfe8;
    color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #2b394d;
    color: #fff;
}
::v-deep .el-pagination.is-background .btn-prev {
    background-color: #8ebfe8;
    color: #fff;
}
::v-deep .el-pagination.is-background .btn-next {
    background-color: #8ebfe8;
    color: #fff;
}

</style>
